
<template>
  <div class="centermap">
    <div class="maptitle">
      <div class="zuo"></div>
      <span class="titletext">DATASHOW</span>
      <div class="you"></div>
    </div>
    <div class="mapwrap">
      <dv-border-box-13 style="padding: 20px">
        <Echart id="CenterMap" :options="options" ref="CenterMap" />
      </dv-border-box-13>
    </div>
  </div>
</template>

<script>
import xzqCode from "../../utils/map/xzqCode";
import { currentGET } from "api/modules";
import * as echarts from "echarts";
import { rigthTopData, getCurrentDate } from 'api/meikai/index'
import { EventBus } from '@/store/bus';
export default {
  data() {
    return {
      options: {},
      dataA: getCurrentDate(),
      productdataA:[],
      getdata:[]
    };
  },
  created() { 
    EventBus.$on('newSelectDate', this.wacthnewSelectDate)
    EventBus.$on('productdata', this.wacthproductdata);
  },

  mounted() {
    // console.log(xzqCode);
    this.getData();
  },
  beforeDestroy() {
    EventBus.$off('newSelectDate', this.wacthnewSelectDate);
    EventBus.$off('productdata', this.wacthproductdata)
  },
  methods: {
    wacthnewSelectDate(data){
            this.dataA = data
          this.getdata =  rigthTopData(this.productdataA, this.dataA )
          this.getData()
        },
        wacthproductdata(data){
            this.productdataA = data
            this.getdata =  rigthTopData(this.productdataA, this.dataA )
          this.getData()
        },
    getData() {

      this.init(this.getdata.FinishedProductsCode, this.getdata.FinishedProductsCount
, this.getdata.semiFinishedProductsCount)
    },
    init(name, data, data2) {
      // console.log(data2);

      let option = {
        title: {
          text: '',
          subtext: '产量'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['成品', '半成品']
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: name
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '成品',
            type: 'bar',
            data: data,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: '半成品',
            type: 'bar',
            data: data2,
            markPoint: {
              data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }
        ]
      };
      this.options = option;
    },
    message(text) {
      this.$Message({
        text: text,
        type: "warning",
      });
    },
    mapclick() {
      if (this.echartBindClick) return;
      //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
      this.$refs.CenterMap.chart.on("click", (params) => {
        // console.log(params);
        let xzqData = xzqCode[params.name];
        if (xzqData) {
          this.getData(xzqData.adcode);
        } else {
          this.message("暂无下级地市!");
        }
      });
      this.echartBindClick = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.centermap {
  margin-bottom: 30px;

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(92deg,
          #0072ff 0%,
          #00eaff 48.8525390625%,
          #01aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("../../assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("../../assets/img/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    height: 548px;
    width: 100%;
    box-sizing: border-box;
    position: relative;

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
    }
  }
}
</style>
